<template>
	<van-cell class="comment-item">
		<van-image slot="icon" class="avatar" round fit="cover" :src="comment.aut_photo" />
		<div slot="title" class="title-wrap">
			<div class="user-name">{{comment.aut_name}}</div>
			<van-button :loading="commentLoading" @click="onCommentLike" class="like-btn"
				:class="{liked: comment.is_liking}" :icon="comment.is_liking ? 'good-job':'good-job-o'">
				{{comment.like_count || '赞'}}
			</van-button>
		</div>

		<div slot="label">
			<p class="comment-content">{{comment.content}}</p>
			<div class="bottom-info">
				<span class="comment-pubdate">{{comment.pubdate | relativeTime}}</span>
				<van-button class="reply-btn" round>回复 {{comment.reply_count}}</van-button>
			</div>
		</div>
	</van-cell>
</template>

<script>
	import {
		addCommentLike,
		deleteCommentLike
	} from '@/api/comment.js'

	export default {
		props: {
			comment: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				commentLoading: false
			}
		},
		created() {},
		methods: {
			async onCommentLike() {
				this.commentLoading = true
				try {
					if (this.comment.is_liking) {
						await deleteCommentLike(this.comment.com_id)
						this.comment.like_count--
					} else {
						await addCommentLike(this.comment.com_id)
						this.comment.like_count++
					}
					this.comment.is_liking = !this.comment.is_liking
				} catch (e) {
					this.$toast('操作失败，请稍后重试')
				}
				this.commentLoading = false
			},
		}
	}
</script>

<style scoped lang="less">
	.comment-item {
		.avatar {
			width: 72px;
			height: 72px;
			margin-right: 25px;
		}

		.title-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-name {
				color: #406599;
				font-size: 26px;
			}
		}

		.comment-content {
			font-size: 32px;
			color: #222222;
			word-break: break-all;
			text-align: justify;
		}

		.comment-pubdate {
			font-size: 19px;
			color: #222;
			margin-right: 25px;
		}

		.bottom-info {
			display: flex;
			align-items: center;
		}

		.reply-btn {
			width: 135px;
			height: 48px;
			line-height: 48px;
			font-size: 21px;
			color: #222;
		}

		.like-btn {
			height: 30px;
			padding: 0;
			border: none;
			font-size: 19px;
			line-height: 30px;
			margin-right: 7px;

			.van-icon {
				font-size: 30px;
			}

			&.liked {
				color: #3296fa;
			}
		}
	}
</style>
